<template>
  <div class="search-result">
       <van-nav-bar left-arrow :title="this.$route.query.keyword +`搜索中心`" @click-left="$router.back()">
    </van-nav-bar>
    <!-- 文章列表 -->
<van-list
  class="article-list"
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell
    v-for="item in list"
    :key="item.art_id.toString()"
    :title="item.title"
      @click="$router.push('/article/' + item.art_id.toString())"
  />
</van-list>
<!-- /文章列表 -->
  </div>
</template>

<script>
import { reqGetSearch } from '@/api/search.js'
export default {
  name: 'SearchResult',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  created () {
    // console.log(this.$route)
  },
  methods: {
    // onLoad 数据没有占满屏幕会自动触发
    async onLoad () {
      const { data: { data: { results } } } = await reqGetSearch(this.$route.query.keyword, this.page)
      // 将返回的数组进行保存
      this.list.push(...results)
      // 将page自增
      this.page++
      // 手动将loading关闭
      this.loading = false
      // 判断数据请求   数据请求结束判断
      if (!results.length) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 控制头部导航栏的通用样式
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title {
    color: white;
  }
  ::v-deep .van-icon {
    color: white;
  }
}
</style>
